<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="pragma" content="no-cache" />
    <script src="vue.global.prod.js"></script>
    <script src="axios.min.js"></script>
    <script src="noty.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="noty.css" />
    <link rel="stylesheet" href="mint.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <title>选取命名格式</title>
    <style>
        .bold {
            font-weight: bolder;
        }

        input[type="radio"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: 2px;
            width: 11px;
            height: 11px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1px solid var(--color);
            text-indent: 2px;
            line-height: 0.65;
            padding: 3px;
        }

        input[type="radio"]:checked+label::before {
            background-color: var(--color);
            padding: 3px;
            background-clip: content-box;
        }

        input[type="radio"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

        input[type="radio"].sep:checked+label::before {
            background-color: #d1b4ff;
        }

        input[type="checkbox"]:checked+label::before {
            background-color: var(--color);
        }

        input[type="checkbox"]+label::before {
            content: "\2713";
            /*不换行空格*/
            color: #ffffff;
            display: inline-block;
            vertical-align: 0.2em;
            width: 1em;
            height: 1em;
            margin-right: 0.2em;
            border-radius: 0.2em;
            background-color: silver;
            text-indent: 0.15em;
            line-height: 0.55;
            /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
        }

        input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

        label {
            cursor: pointer;
        }

        .sep-contain {
            opacity: 0;
            width: 0;
            height: 87px;
            transition: width 0.2s ease 0.1s, opacity 0.1s ease 0s;
            overflow: hidden;
        }

        .sep-contain-display {
            opacity: 1;
            width: 56px;
            height: 87px;
            transition: opacity 0.2s ease 0.2s, width 0.2s ease 0s;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <header class="page-head">
        <a class="title" href="/log">Format Name</a>
        <div class="compass">
            <a href="https://gitee.com/cxh1205/FormatName/blob/master/README.md#%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C"
                target="_blank">使用手册</a>
        </div>
    </header>
    <table id="body">
        <tr>
            <td>
                <div @click="reset" class="button">重新选择Excel</div>
            </td>
        </tr>
        <tr>
            <td>
                <hr />
                <table>
                    <tr>
                        <td v-for="(i,index) in picked">
                            <div v-if="index%2==0" style="min-height: 87px">
                                <div v-for="key in keys">
                                    <input type="radio" :id="key+index" :value.number="keys.indexOf(key)"
                                        v-model="picked[index]" class="radio" />
                                    <label :for="key+index">{{key}}</label>
                                    <br />
                                </div>
                                <div>
                                    <input style="width: 5em" v-model="picked[index]" />
                                    <br />
                                </div>
                            </div>
                            <div v-else :class="{'sep-contain-display':!same, 'sep-contain':same}">
                                <input type="radio" :id="'kongbai'+index" value="" v-model="picked[index]"
                                    class="sep" />
                                <label :for="'kongbai'+index">无&nbsp;&nbsp;</label>
                                <br />
                                <input type="radio" :id="'hengxian'+index" value="-" v-model="picked[index]"
                                    class="sep" />
                                <label :for="'hengxian'+index">-&nbsp;&nbsp;&nbsp;</label>
                                <br />
                                <input type="radio" :id="'kongge'+index" value=" " v-model="picked[index]"
                                    class="sep" />
                                <label :for="'kongge'+index">空格</label>
                                <br />
                                <div>
                                    <input style="width: 50px" v-model="picked[index]" />
                                    <br />
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div @click="increse" class="button">增加</div>
                <div @click="decrese" class="button">减少</div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <hr />
                    <input type="checkbox" v-model="same" id="same" />
                    <label for="same" class="bold">统一分隔符</label>
                    <span v-show="same">
                        <label for="same" class="bold">为：&nbsp;</label>
                        <input type="radio" id="kongbai" value="" v-model="sep" class="radio" />
                        <label for="kongbai">无&nbsp;</label>
                        <input type="radio" id="hengxian" value="-" v-model="sep" class="radio" />
                        <label for="hengxian">&nbsp;-&nbsp;&nbsp;</label>
                        <input type="radio" id="kongge" value=" " v-model="sep" class="radio" />
                        <label for="kongge">空格&nbsp;&nbsp;或自定义为</label>
                        <input style="width: 2em" v-model="sep" />
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <hr />
                <label class="bold">格式：</label>
                <div class="raw" style="display: inline">{{return_format}}</div>
            </td>
        </tr>
        <tr>
            <td>
                <label class="bold">样例：</label>
                <div class="raw" style="display: inline">{{return_example}}</div>
            </td>
        </tr>
        <tr>
            <td>
                <hr />
                <div class="tip">
                    点击"文件管理器"的地址栏空白处，即可复制文件夹路径
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入包含重命名文件的文件夹路径" v-model="path" />
            </td>
        </tr>
        <tr>
            <td>
                <div @click="submit" class="button submit">提交</div>
            </td>
        </tr>
    </table>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    keys: [],
                    examples: [],
                    sep: "",
                    picked: [0, "", 0],
                    path: "",
                    same: true,
                };
            },
            methods: {
                range(start, stop, step = 1) {
                    return Array(Math.ceil((stop - start) / step))
                        .fill(start)
                        .map((x, y) => x + y * step);
                },
                get_data() {
                    axios.post("GetData").then((res) => {
                        var data = res.data;
                        let keys = [];
                        let examples = [];
                        for (i in data) {
                            keys.push(data[i]["key"]+(data[i]["display"]?'':'（有非法字符）'));
                            examples.push(data[i]["values"][0]);
                        }
                        this.keys = keys;
                        this.examples = examples;
                    }).catch((res) => {
                        notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                    });
                },
                submit() {
                    axios
                        .post("SubmitExecute", {
                            path: this.path.replace(/\\/g, "/"),
                            execute: this.picked,
                        })
                        .then((res) => {
                            console.log(res.data);

                            if (res.data["code"] == 0) {
                                notify(res.data["msg"], "success");
                                setTimeout(() => {
                                    document.location.href = "/Analysis";
                                }, 1000);
                            } else {
                                notify(res.data["msg"], "error");
                            }
                        }).catch((res) => {
                            notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                        });
                },
                reset() {
                    document.location.href = "/GetExcel";
                },
                increse() {
                    if (this.picked.length > 12) {
                        notify("哥，不至于！", "warning");
                    } else {
                        this.picked.push(this.sep, 0);
                    }
                },
                decrese() {
                    if (this.picked.length > 2) {
                        this.picked = this.picked.slice(0, -2);
                    }
                },
                get_newest() {
                    axios
                        .get(
                            "https://gitee.com/cxh1205/format-name/raw/master/update.json"
                        )
                        .then((res) => {
                            console.log(res.data);
                        }).catch((res) => {
                            notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                        });
                },
            },
            created() {
                this.get_data();
                // this.get_newest()
            },
            watch: {
                sep() {
                    for (let i = 1; i < this.picked.length; i += 2) {
                        this.picked[i] = this.sep;
                    }
                },
                same() {
                    if (same) {
                        for (let i = 1; i < this.picked.length; i += 2) {
                            this.picked[i] = this.sep;
                        }
                    }
                },
            },
            computed: {
                return_format() {
                    let text = [];
                    for (let i = 0; i < this.picked.length; i++) {
                        let item = this.picked[i];
                        text.push(this.keys[item] ? this.keys[item] : item);
                    }
                    text.push(".xxx");
                    return text.join("");
                },
                return_example() {
                    let text = [];
                    for (let i = 0; i < this.picked.length; i++) {
                        let item = this.picked[i];
                        text.push(this.examples[item] ? this.examples[item] : item);
                    }
                    text.push(".xxx");
                    return text.join("");
                },
            },
        });
        const vm = app.mount("#body");
    </script>
</body>

</html>